<template>
  <div>
    
  </div>
</template>

<script>
export default {
  name: 'RoleUser',
  props: {
    data: Array,
    name: String,
    loading: Boolean,
    roleId: String
  },
  data () {
    return {
      tableData: [],    //  当前页数据
    /************************新增角色成员********************* */
      user: '',                 //  新增用户id/cname
      dialogAddVisible: false,    //  新增模态框
      allStaff: [],               //  所有员工
    }
  },
  watch: {
   'roleId': function (n, o) {
     console.log(this.roleId)
   }
  },
  mounted(){
    console.log(this.roleId)
    this.getData()
  },
  activated(){
    console.log(333333)
  },

  methods: {
    getData(){
      this.$post("/api/RoleMemberController/getList",{roleId: this.roleId}, (data) => {
        this.tableData = data.list;
      })
    },
    //  删除角色用户
    delRole(id, index){
      this._confirm('确定删除吗?', () => {
        this.$post('/api/RoleMemberController/delOne', {id: id}, (data) => {
          this.$message.success("删除成功！")
          this.tableData.splice(index, 1)
        })
      })
    },
  /******************新增***************** */
    //  获取所有员工
    getAllStaff(){
      if(this.allStaff.length > 0) return
      let params = {}
      params.currentPage = 1
      params.queryForm = {}
      params.prop = 'id'
      params.order = 1
      this.$post("/api/UserController/getList",params, (data) => {
        this.allStaff = data.list;
      })
    },
    // 打开新增模态框
    openAdd(){
      this.getAllStaff()
    },
    // 确定新增
    add(){
      if(!this.user){
        this.$message.error("请选择用户！")
        return
      }
      this.$post("/api/RoleMemberController/add", {userId: this.user.split('/')[0], roleId: this.roleId}, (data) => {
        this.$message.success("添加成功！")
        this.dialogAddVisible = false
        let item = {
          id: data.rm.id,
          userId: data.rm.userId,
          userCname: this.user.split('/')[1],
        }
        this.tableData.push(item)
      })
    },
  }
}
</script>

<style lang="less" scoped>
  #roleUser{
    display: flex;
    height: 100%;
    .left{
      width: 150px;
      font-size: 14px;
      border-right: 2px solid #ddd;
      border-top: 2px solid #ddd;
      background: #f2f2f2;
      li{
        padding-left: 20px;
        line-height: 36px;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
        &.active{
          background: #fff;
        }
      }
    }
    .right{
      flex: 1;
      padding-left: 20px;
    }
  }
  .dialogAdd {
    .el-input, .el-cascader, .el-select, .el-textarea {
      width: 400px;
    }
  }
</style>

